<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style type="text/css">
        body {
            background-color: #5AC2FF;
            height: 100vh;
            padding-bottom: 170px;
        }

        .vueApp {
            height: 100%;
        }

        .slide-area {
            position: relative;
            height: 100%;
        }

        .swiper-container,
        .swiper-wrapper,
        .swiper-slide {
            z-index: 990;
            height: 100%;
        }

        .index {
            position: absolute;
            left: 50%;
            top: 10px;
            width: 58px;
            height: 23px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            margin-left: -29px;
            font-size: 13px;
            font-weight: 400;
            color: #FFFFFF;
        }

        .image {
            max-height: 80%;
            object-fit: contain;
            margin: 0 auto;
            border-radius: 5px;
        }

        .score-row {
            position: absolute;
            left: 0;
            bottom: 10px;
            width: 100%;
            line-height: 30px;
            color: #FFFFFF;
            font-size: 15px;
        }

        .score {
            color: #FD9B43;
            font-weight: bold;
            font-size: 20px;
        }

        .dot {
            width: 6px;
            height: 6px;
            border-radius: 3px;
        }

        .icon-switch {
            width: 22px;
            height: 22px;
        }

        .controls {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 170px;
        }

        .controls .item {
            margin: 0 25px;
            color: #fff;
            font-size: 15px;
            text-align: center;
        }

        .icon-controls {
            display: block;
            width: 69px;
            height: 69px;
            margin: 20px auto 0 auto;
        }

        .arrow {
            z-index: 999;
            position: absolute;
            top: 50%;
            width: 24px;
            height: 24px;
            margin-top: -14px;
        }

        .left {
            left: 13px;
        }

        .right {
            right: 13px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="slide-area">
            <div class="index" data-flex="cross:center main:center">{{wordIndex+1}}/{{listData.length}}</div>
            <img src="../../image/ui/ar_hb.png" onclick="fnNext()" v-show="wordIndex + 1 !== listData.length"
                alt="" class="arrow right">
            <img src="../../image/ui/al_hb.png" onclick="swiper.slidePrev()" v-show="wordIndex" alt=""
                class="arrow left">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in listData" data-flex="cross:center main:center">
                        <img :src="item.questionPicUrl" alt="" class="image cacheImg" :cacheurl="item.questionPicUrl">
                        <!-- <div v-show="item.recordUrl" class="score-row" data-flex="cross:center main:center">
                            <div class="dot" :class="item.score > great ? 'green-b' : item.score > notBad ? 'orange-b' : 'red-b'"></div>
                            <div data-flex="cross:center">&nbsp;&nbsp;得分&nbsp;&nbsp;<span class="score">{{item.score || 0}}</span>&nbsp;&nbsp;</div>
                            <img @click="handlePlayWord(wordIndex, 1)"
                                :src="item.playType == 1 && isPlay ? '../../image/ui/pause_hb.png' : '../../image/ui/play_hb.png'"
                                class="icon-switch" alt="">
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="controls" data-flex="main:center cross:center" v-if="listData.length">
            <div class="item">
                <img @click="handlePlayWord(wordIndex, 3)" :src="listData[wordIndex].playType == 3 && isPlay ?
                '../../image/ui/pause_hb2.png' : '../../image/ui/listen_hb.png'" alt="" class="icon-controls">
                讲解
            </div>
            <div class="item">
                <img @click="handlePlayWord(wordIndex, 2)"
                    :src="listData[wordIndex].playType == 2 && isPlay ? '../../image/ui/pause_hb2.png' : '../../image/ui/voice.png'"
                    alt="" class="icon-controls">
                原音
            </div>
            <div class="item" onclick="headerFn()">
                <!-- <img @click="handleRecordWord(wordIndex)"
                    :src="isRecord ? '../../image/ui/mike.gif' : '../../image/ui/mike.png'" alt=""
                    class="icon-controls"> -->
                <img :src="isActivate == 1 ? '../../image/ui/lxt.png' : '../../image/ui/lxt_gray.png'" class="icon-controls" alt="">
                <!-- {{ listData[wordIndex].score ? '重新录音' : '录音' }} -->
                练习题
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript" src="../../script/recordScore.js"></script>
<script type="text/javascript" src="../../script/question/data_parse.js"></script>
<script type="text/javascript" src="../../script/saveFiles.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, playIndex = -1, pageParam, swiper;
    var lastIndex = 0, isPlayAudio = true;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
        // 初始化保存s
        initSaveFile();
        // 初始化录音引擎
        initEngine();
        // 初始化播放器
        Audio.init();
        addAudioEvent();
        // 页面消失，停止录音
        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            // 停止录音
            fnStopRecord();
            // 停止播放
            Audio.pause();
            // 移除监听事件
            Audio.removeEventListener();
            playIndex = -1;
            vm.isPlay = false;
        });
        // 返回继续答题
        api.addEventListener({
            name: 'back-to-answer'
        }, function() {
            if (vm.isRecord == true) {
                // 停止录音
                fnStopRecord();
            }
            if (vm.isPlay) {
                // 停止播放
                Audio.pause();
                playIndex = -1;
            }
            if (isPlayAudio) {
                handlePlayWord(vm.wordIndex, 2);
                vm.isPlay = true;
            }else {
                isPlayAudio = true;
            }
            vm.isRecord = false;
            vm.listData[vm.wordIndex].isRecord = false;
        });
        lastIndex = api.getPrefs({
            sync: true,
            key: pageParam.catalogId
        }) || 0;
        setTimeout(function() {
            api.closeWin({
                name: 'hb_end_win'
            });
        }, 300)
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                isActivate: pageParam.info.isActivate,
                // 是否开始录音
                isRecord: false,
                // 是否播放音频
                isPlay: false,
                // 当前索引
                wordIndex: lastIndex,
                // 列表数据
                listData: [],
                // 好
                great: 70,
                // 一般
                notBad: 30,
                // 差
                bad: 0
            },
            methods: {
                initSwiper: function () {
                    swiper = new Swiper('.swiper-container', {
                        allowTouchMove: vm.isActivate == 0 ? false : true,
                        autoplay: false,
                        loop: false,
                        initialSlide: lastIndex,
                        on: {
                            slideChangeTransitionEnd: function () {
                                if (vm.isRecord == true) {
                                    // 停止录音
                                    fnStopRecord();
                                }
                                if (vm.isPlay) {
                                    // 停止播放
                                    Audio.pause();
                                    playIndex = -1;
                                }
                                vm.wordIndex = this.activeIndex;
                                if (isPlayAudio) {
                                    handlePlayWord(vm.wordIndex, 2);
                                    vm.isPlay = true;
                                }else {
                                    isPlayAudio = true;
                                }
                                vm.isRecord = false;
                                vm.listData[vm.wordIndex].isRecord = false;
                                api.setPrefs({
                                    key: pageParam.catalogId,
                                    value: this.activeIndex+''
                                });
                            }
                        },
                    });
                }
            }
        });
        getData();
    }

    // 下一题
    function fnNext() {
        if(vm.isActivate == 0 && vm.wordIndex == 2) {
            fnToast('未激活用户只能查看前三页');
        } else {
            swiper.slideNext();
        }
    }

    // 获取页面数据
    function getData() {
        var url = 'question/findQuestionList';
        var params = {
            id: pageParam.catalogId,
            questionTypeCode: '51'
        };
        var callback = function (data) {
            var listData = formateQAData(data.listData);
            for (var i = 0; i < listData.length; i++) {
                var item = listData[i];
                // item.src = fileIsSave(item.id+'questionAudioUrl') || item.questionAudioUrl;
                if (item.stuAnswerResultDetailId) {
                    // 获取录音的src
                    var src = getIsSave(item.stuAnswerResultDetailId);
                    src = 'fs:/' + (src || '')
                    item.recordUrl = src;
                    item.score = item.stuAnswerResultDetailScoreValue;
                }
            }
            vm.listData = listData;
            if (vm.listData.length > 0) {
                setTimeout(function () {
                    vm.initSwiper();
                    if(!vm.wordIndex) {
                        handlePlayWord(vm.wordIndex, 2);
                    }
                }, 100);
            } else {
                fnToast('该集暂时没有数据呦');
                setTimeout(function () {
                    api.closeWin();
                }, 1200)
            }
            vm.$nextTick(function() {
                fnCacheImgLocal();
            });
        };
        POST(url, params, callback);
    }

    // 录音动作
    function handleRecordWord(index) {
        var list = deepCopy(vm.listData),
            item = list[index];
        // 停止播放
        Audio.pause();
        playIndex = -1;
        vm.isPlay = false;
        if (vm.isRecord) {
            // 暂停录音
            fnStopRecord();
            vm.isRecord = false;
        } else {
            // 开始录音
            vm.isRecord = true;
            fnSentRecordIdentify(item.questionName, recordCallback);
            item.isRecord = true;
        }
        vm.listData = list;
    }

    // 录音完成回调
    function recordCallback(data) {
        var url = data.url, // 云端地址
            local = data.localPath, // 本地录音文件
            score = data.score; // 单词得分
        var list = deepCopy(vm.listData),
            item = list[vm.wordIndex];
        if (item.isRecord) {
            item.recordUrl = 'fs:/' + local;
            item.score = score;
            item.isRecord = false;
            vm.listData = list;
            if(vm.isActivate == 1) {
                submiteOne(vm.wordIndex, local);
            }
        }
        vm.isRecord = false;
    }

    // 提交一个题
    function submiteOne(index, path) {
        var _path = path + '';
        var item = vm.listData[index];
        var url = 'question/compareAnswer';
        var params = {
            otherInfo: '',
            frontScore: item.score,
            answerStartTime: new Date().getTime(),
            fillAnswerStr: '',
            id: item.id
        };
        var callback = function (data) {
            var item = vm.listData[index];
            item.doStatus = data.judgeRight ? '1' : '2';
            saveFileById(data.answerRightOrErrorId, _path);
            if(isSubmiteQuestionList(vm.listData)) {
                fnOpenFrame({
                    name: 'submit_frm',
                    url: './submit_frm.html',
                    pageParam: {
                        winName: api.winName,
                        frameName: api.frameName
                    }
                });
            }else if(index == vm.listData.length -1) {
                var list = fnGetNotAnswerCountInList(vm.listData);
                fnOpenPublicWin('', 'video/end_tips', {count: list.length});
                isPlayAudio = false;
                swiper.slideTo(list[0]);
            }
        };
        POST(url, params, callback);
    }

    // 播放动作
    // type 1 录音播放 2 原音播发 3 讲解播放
    function handlePlayWord(index, type) {
        var list = deepCopy(vm.listData),
            item = list[index];
        if (type == 1 && item.score === undefined) {
            fnToast('请先录音');
            return;
        }
        // 暂停
        // 暂停后 playIndex = -1，无法继续播放
        if (playIndex == index && item.playType == type) {
            Audio.pause();
            playIndex = -1;
            vm.isPlay = false;
        } else {
            playIndex = index;
            var src = '';
            if (type == 1) {
                src = item.recordUrl;
            } else if (type == 2) {
                src = item.questionAudioUrl;
            } else if (type == 3) {
                src = item.questionExplainAudioUrl;
            }
            vm.isPlay = true;
            Audio.setListAndPlay([{ src: src }]);
        }
        item.playType = type;
        vm.listData = list;
        // alert(vm.listData[vm.wordIndex].playType == 2 && vm.isPlay);
    }

    // 音频播放事件回调
    function addAudioEvent() {
        var eventCallback = function (eventType, _playIndex) {
            if (eventType == 0) {
                // 一个音频播放结束
                vm.isPlay = false;
                playIndex = -1;
            }
        };
        var progressCallback = function (progress) {
            // 暂时不需要
        };
        Audio.addEvent(eventCallback, progressCallback);
    }

    // 点击右上角图标
    function headerFn() {
        var msg = null;
        if(pageParam.isConfigQuestion != 1) {
            msg = '当前绘本未配置题目';
        }else if(pageParam.isActivate != 1) {
            msg = '需激活该绘本套集才可使用练习题功能';
        }
        if(msg) {
            fnToast(msg);
            return;
        }
        fnOpenPublicWin('练习题', 'video/answer_start', {
            isBtn: true,
            btnName: '错题集',
            headerFn: 'headerFn',
            itemId: pageParam.itemId
        });
    }

    // 提交
    function handleSubmite() {
        var url = 'question/catalogOverAnswer';
        var params = {
            catalogId: pageParam.catalogId,
            questionTypeCode: '51'
        };
        var callback = function (data) {
            api.sendEvent({
                name: 'hbSubmitOne'
            });
            fnToast('提交成功');
            fnOpenWin({
                name: 'hb_end_win',
                url: './hb_end.html',
                pageParam: {
                    info: pageParam.info,
                    score: data.Integral,
                    index: pageParam.index,
                    hbId: pageParam.hbId
                }
            });
            setTimeout(function() {
                api.closeWin();
            }, 500);
        };
        POST(url, params, callback);
    }

    // 确认提交回调
    function submitFrmCallback() {
        handleSubmite();
    }
</script>

</html>